<template>
  <div class="css-style-editor">
    <div
      v-for="attr in attrsArr"
      :key="attr"
      class="item"
    >
      <!-- color -->
      <div
        v-if="hasAttr(attr, 'color')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || colorLabel"
          :rules="genRulesByKey(`${option}.color`)"
        >
          <ColorPicker v-model:value="cssStyle.color" />
        </VsFormItem>
      </div>

      <!-- fontSize -->
      <div
        v-else-if="hasAttr(attr, 'fontSize')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || fontSizeLabel"
          :prop="`${option}.fontSize`"
          :rules="genRulesByKey(`${option}.fontSize`)"
        >
          <Range
            v-model:value="cssStyle.fontSize"
            :min="C.fontSizeMin"
            :max="C.fontSizeMax"
            type="input"
          />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'maxFontSize')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('word.maxFontSize')"
          :prop="`${option}.maxFontSize`"
          :rules="genRulesByKey(`${option}.maxFontSize`)"
        >
          <Range
            v-model:value="cssStyle.maxFontSize"
            :min="C.fontSizeMin"
            :max="C.fontSizeMax"
            type="input"
          />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'minFontSize')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('word.minFontSize')"
          :prop="`${option}.minFontSize`"
          :rules="genRulesByKey(`${option}.minFontSize`)"
        >
          <Range
            v-model:value="cssStyle.minFontSize"
            :min="C.fontSizeMin"
            :max="C.fontSizeMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- lineHeight -->
      <div
        v-else-if="hasAttr(attr, 'lineHeight')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('word.lineHeight')"
          :prop="`${option}.lineHeight`"
          :rules="genRulesByKey(`${option}.lineHeight`)"
        >
          <Range
            v-model:value="cssStyle.lineHeight"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- textAlign -->
      <div
        v-else-if="hasAttr(attr, 'textAlign')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('word.alignment')"
          :prop="`${option}.textAlign`"
          :rules="generateRules({ label: $demoi18n('word.alignment') })"
        >
          <el-select
            v-model="cssStyle.textAlign"
            size="default"
          >
            <el-option
              :label="$demoi18n('option.align.left')"
              value="left"
            ></el-option>
            <el-option
              :label="$demoi18n('option.align.center')"
              value="center"
            ></el-option>
            <el-option
              :label="$demoi18n('option.align.right')"
              value="right"
            ></el-option>
          </el-select>
        </VsFormItem>
      </div>

      <!-- fontWeight -->
      <div
        v-else-if="hasAttr(attr, 'fontWeight')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.bold')"
          :prop="`${option}.fontWeight`"
          :rules="generateRules({ label: $demoi18n('panel.cssStyle.bold') })"
        >
          <el-select
            v-model="cssStyle.fontWeight"
            size="default"
          >
            <el-option
              label="normal"
              value="normal"
            ></el-option>
            <el-option
              label="bolder"
              value="bolder"
            ></el-option>
            <el-option
              label="bold"
              value="bold"
            ></el-option>
            <el-option
              label="100"
              value="100"
            ></el-option>
            <el-option
              label="200"
              value="200"
            ></el-option>
            <el-option
              label="300"
              value="300"
            ></el-option>
            <el-option
              label="400"
              value="400"
            ></el-option>
            <el-option
              label="500"
              value="500"
            ></el-option>
            <el-option
              label="600"
              value="600"
            ></el-option>
            <el-option
              label="700"
              value="700"
            ></el-option>
            <el-option
              label="800"
              value="800"
            ></el-option>
          </el-select>
        </VsFormItem>
      </div>

      <!-- switch -->
      <div
        v-else-if="hasAttr(attr, 'isStripeVisiable')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || $demoi18n('word.zebraPrint')">
          <el-switch v-model="cssStyle.isStripeVisiable"></el-switch>
          <el-tooltip
            class="item"
            :effect="xvueTheme"
            :content="$demoi18n('panel.tip.tableExtensionTip')"
            placement="top-start"
          >
            <el-button
              :link="true"
              type="primary"
              :style="{ marginLeft: '5px' }"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-button>
          </el-tooltip>
        </VsFormItem>
      </div>

      <!-- backgroundColor -->
      <div
        v-else-if="hasAttr(attr, 'backgroundColor')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || valueLabel || $demoi18n('panel.cssStyle.bgColor')">
          <ColorPicker v-model:value="cssStyle.backgroundColor" />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'defaultBckColor')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || valueLabel || $demoi18n('word.defaultBgColor')">
          <ColorPicker v-model:value="cssStyle.defaultBckColor" />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'activeBckColor')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || valueLabel || $demoi18n('word.selectBgColor')">
          <ColorPicker v-model:value="cssStyle.activeBckColor" />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'stripeBgColor') && cssStyle.isStripeVisiable"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || $demoi18n('word.zebraPrintBgColor')">
          <ColorPicker v-model:value="cssStyle.stripeBgColor" />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'hoverBgColor')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || $demoi18n('word.hoverBgColor')">
          <ColorPicker v-model:value="cssStyle.hoverBgColor" />
        </VsFormItem>
      </div>
      <div
        v-else-if="hasAttr(attr, 'currentBgColor')"
        class="inner"
      >
        <VsFormItem :label="getLabel(attr) || $demoi18n('word.selectedBgColor')">
          <ColorPicker v-model:value="cssStyle.currentBgColor" />
        </VsFormItem>
      </div>
      <!-- opacity -->
      <div
        v-else-if="hasAttr(attr, 'opacity')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.label.opacityPercent_1')"
          :prop="`${option}.opacity`"
          :rules="genRulesByKey(`${option}.opacity`)"
        >
          <Range
            v-model:value="cssStyle.opacity"
            :min="0"
            :max="1"
            :precision="1"
            :step="0.1"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- backgroundImage -->
      <div v-else-if="hasAttr(attr, 'backgroundImage')">
        <VsFormItem :label="getLabel(attr) || $demoi18n('word.backgroundImage')">
          <IconEditor
            :icon="cssStyle.backgroundImage"
            :component-style="componentStyle"
            mode="imageUploadNoStyle"
            @save="saveBgImage($event, cssStyle)"
            @delete="deleteBgImage($event, cssStyle)"
          />
          <el-tooltip
            v-if="option.includes('card')"
            placement="top"
            :effect="xvueTheme"
          >
            <template #content>
              <div>{{ $demoi18n('word.backgroundImageTip') }}</div>
            </template>
            <span :style="{ margin: '2px 0px 0px 5px' }">
              <el-icon style="color:#00aaff"><InfoFilled /></el-icon>
            </span>
          </el-tooltip>
        </VsFormItem>
      </div>

      <!-- fontFamily -->
      <div
        v-else-if="hasAttr(attr, 'fontFamily')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.fontFamily')"
          :prop="`${option}.fontFamily`"
          :rules="generateRules({ label: $demoi18n('panel.cssStyle.fontFamily') })"
        >
          <el-select v-model="cssStyle.fontFamily" size="default">
            <el-option v-for="(n, i) in fontFamilyOptions" :key="i" :label="n.label" :value="n.value"></el-option>
          </el-select>
        </VsFormItem>
      </div>

      <!-- width -->
      <div
        v-else-if="hasAttr(attr, 'width')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.width')"
          :prop="`${option}.width`"
          :rules="genRulesByKey(`${option}.width`)"
        >
          <Range
            v-model:value="cssStyle.width"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- _width 带开关 -->
      <div
        v-else-if="hasAttr(attr, '_width')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.width')"
          :prop="`${option}._width`"
          :rules="genRulesByKey(`${option}.width`)"
        >
          <CssStyleSwitch :form="cssStyle._width">
            <Range
              v-model:value="cssStyle._width.value"
              :min="C.numberMin"
              :max="C.numberMax"
              type="input"
            />
          </CssStyleSwitch>
        </VsFormItem>
      </div>

      <!-- height -->
      <div
        v-else-if="hasAttr(attr, 'height')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.height')"
          :prop="`${option}.height`"
          :rules="genRulesByKey(`${option}.height`)"
        >
          <Range
            v-model:value="cssStyle.height"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- horizontal -->
      <div
        v-else-if="hasAttr(attr, 'horizontal')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.horizontalAlign')"
          :prop="`${option}.horizontal`"
          :rules="genRulesByKey(`${option}.horizontal`)"
        >
          <el-radio-group
            v-model="cssStyle.horizontal"
            class="icon-radio-group"
          >
            <el-radio
              v-for="(item, index) in icon.horStyle"
              :key="index"
              :label="item.value"
              border
            >
              <img
                :src="item.img"
                :alt="item.key"
              />
            </el-radio>
          </el-radio-group>
          <el-tooltip
            v-if="option.includes('headerStyle')"
            placement="top"
            :effect="xvueTheme"
          >
            <template #content>
              <div>{{ $demoi18n('panel.labelTip.tableHeaderHorizontalLimit') }}</div>
            </template>
            <span :style="{ margin: '2px 0px 0px -5px' }">
              <el-icon style="color:#00aaff"><InfoFilled /></el-icon>
            </span>
          </el-tooltip>
        </VsFormItem>
      </div>

      <!-- vertical -->
      <div
        v-else-if="hasAttr(attr, 'vertical')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.verticalAlign')"
          :prop="`${option}.vertical`"
          :rules="genRulesByKey(`${option}.vertical`)"
        >
          <el-radio-group
            v-model="cssStyle.vertical"
            class="icon-radio-group"
          >
            <el-radio
              v-for="(item, index) in icon.verStyle"
              :key="index"
              :label="item.value"
              border
            >
              <img
                :src="item.img"
                :alt="item.key"
              />
            </el-radio>
          </el-radio-group>
        </VsFormItem>
      </div>

      <!-- showStyle -->
      <div
        v-else-if="hasAttr(attr, 'showStyle') && cssStyle.showStyle"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.cssStyle.displayMode')"
          :prop="`${option}.showStyle`"
          :rules="genRulesByKey(`${option}.showStyle`)"
        >
          <el-radio-group
            v-model="cssStyle.showStyle"
            class="icon-radio-group"
          >
            <el-radio
              v-for="(item, index) in icon.showStyle"
              :key="index"
              :label="item.value"
              border
            >
              <img
                :src="item.img"
                :alt="item.key"
              />
            </el-radio>
          </el-radio-group>
        </VsFormItem>
      </div>

      <!-- textIconAlign -->
      <div
        v-else-if="hasAttr(attr, 'textIconAlign')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.cssStyle.textIconAlignment')"
          :prop="`${option}.textIconAlign`"
          :rules="genRulesByKey(`${option}.textIconAlign`)"
        >
          <el-radio-group
            v-model="cssStyle.textIconAlign"
            class="icon-radio-group"
          >
            <el-radio
              v-for="(item, index) in icon.textIconStyle"
              :key="index"
              :label="item.value"
              border
            >
              <img
                :src="item.img"
                :alt="item.key"
              />
            </el-radio>
          </el-radio-group>
        </VsFormItem>
      </div>

      <!-- marginTop | marginBottom | marginLeft | marginRight -->
      <div
        v-else-if="isMargin(attr)"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n(`word.${attr}`)"
          :prop="`${option}.${attr}`"
          :rules="genRulesByKey(`${option}.${attr}`)"
        >
          <Range
            v-model:value="cssStyle[attr]"
            :min="C.numberMinNeg"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- paddingTop | paddingBottom | paddingLeft | paddingRight -->
      <div
        v-else-if="isPadding(attr)"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n(`word.${attr}`)"
          :prop="`${option}.${attr}`"
          :rules="genRulesByKey(`${option}.${attr}`)"
        >
          <Range
            v-model:value="cssStyle[attr]"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- borderRadius -->
      <div
        v-else-if="hasAttr(attr, 'borderRadius')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('word.fillet')"
          :prop="`${option}.borderRadius`"
          :rules="genRulesByKey(`${option}.borderRadius`)"
        >
          <Range
            v-model:value="cssStyle.borderRadius"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- borderWidth -->
      <div
        v-else-if="hasAttr(attr, 'borderWidth')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.borderWidth')"
          :prop="`${option}.borderWidth`"
          :rules="genRulesByKey(`${option}.borderWidth`)"
        >
          <Range
            v-model:value="cssStyle.borderWidth"
            :min="C.numberMin"
            :max="C.numberMax"
            type="input"
          />
        </VsFormItem>
      </div>

      <!-- borderSize -->
      <div
        v-else-if="hasAttr(attr, 'borderSize')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.borderSize')"
          :prop="`${option}.borderSize`"
          :rules="genRulesByKey(`${option}.borderSize`)"
        >
          <el-input-number
            v-model="cssStyle.borderSize"
            size="small"
            :controls="false"
          ></el-input-number>
          <span class="input-number-unit">px</span>
        </VsFormItem>
      </div>

      <!-- borderColor -->
      <div
        v-else-if="hasAttr(attr, 'borderColor')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.borderColor')"
          :prop="`${option}.borderColor`"
        >
          <ColorPicker v-model:value="cssStyle.borderColor" />
        </VsFormItem>
      </div>
      
      <!-- isShadowVisiable 阴影显示开关 -->
      <div
        v-else-if="hasAttr(attr, 'isShadowVisiable')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.shadowing')"
          :prop="`${option}.isShadowVisiable`"
          :rules="genRulesByKey(`${option}.isShadowVisiable`)"
        >
          <el-switch v-model="cssStyle.isShadowVisiable"></el-switch>
        </VsFormItem>
      </div>

      <!-- offsetX -->
      <div
        v-else-if="hasAttr(attr, 'offsetX')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.offsetX')"
          :prop="`${option}.offsetX`"
          :rules="genRulesByKey(`${option}.offsetX`)"
        >
          <el-input-number
            v-model="cssStyle.offsetX"
            size="small"
            :controls="false"
          ></el-input-number>
          <span class="input-number-unit">px</span>
        </VsFormItem>
      </div>

      <!-- offsetY -->
      <div
        v-else-if="hasAttr(attr, 'offsetY')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.offsetY')"
          :prop="`${option}.offsetY`"
          :rules="genRulesByKey(`${option}.offsetY`)"
        >
          <el-input-number
            v-model="cssStyle.offsetY"
            size="small"
            :controls="false"
          ></el-input-number>
          <span class="input-number-unit">px</span>
        </VsFormItem>
      </div>

      <!-- shadowRadius -->
      <div
        v-else-if="hasAttr(attr, 'shadowRadius')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('panel.label.shadowRadius')"
          :prop="`${option}.shadowRadius`"
          :rules="genRulesByKey(`${option}.shadowRadius`)"
        >
          <el-input-number
            v-model="cssStyle.shadowRadius"
            size="small"
            :controls="false"
          ></el-input-number>
          <span class="input-number-unit">px</span>
        </VsFormItem>
      </div>

      <!-- textDecoration -->
      <div
        v-else-if="hasAttr(attr, 'textDecoration')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) ||$demoi18n('word.scribes')"
          :prop="`${option}.textDecoration`"
        >
          <el-select
            v-model="cssStyle.textDecoration"
            size="default"
          >
            <el-option
              label="none"
              value="none"
            ></el-option>
            <el-option
              label="underline"
              value="underline"
            ></el-option>
            <el-option
              label="line-through"
              value="line-through"
            ></el-option>
          </el-select>
        </VsFormItem>
      </div>

      <!-- flexDirection -->
      <div
        v-else-if="hasAttr(attr, 'flexDirection')"
        class="inner"
      >
        <VsFormItem
          :label="getLabel(attr) || $demoi18n('panel.label.arrangement')"
          :prop="`${option}.flexDirection`"
        >
          <el-select v-model="cssStyle.flexDirection" size="default">
            <el-option v-for="(n, i) in flexDirections" :key="i" :label="n.label" :value="n.value"></el-option>
          </el-select>
        </VsFormItem>
      </div>

    </div>
  </div>
</template>
<script>
import Range from '@/components/common/range/range.vue';
import ColorPicker from '@/components/common/color-picker/color-picker.vue';
import { generateRules, genRulesByKey } from '@/utils/rules';
import { isObject, objHas } from '@/utils/util.js';
import CssStyleSwitch from './css-style-switch.vue';
import icon from './icon-config/icon-config.js';
import rulesConst from '@/rules/rules_constant.js';
import * as Options from '@/components/common/options/options.js';
import cssDefault from './cssDefault.js';

// 必须这样引入，因为该组件被循环依赖，用import会报错，升级vue3后则需要加上defineAsyncComponent
import { defineAsyncComponent } from 'vue';
const IconEditor = defineAsyncComponent(() => import('@/components/common/icon/icon-editor.vue'));

export default {
  components: { ColorPicker, Range, CssStyleSwitch, IconEditor },
  props: {
    dfAttrs: {
      type: Object,
      default: () => {
        const dfs = {};
        Object.entries(cssDefault).map(([key, val]) => {
          dfs[key] = val.value;
        });
        return dfs;
      },
    },
    cssStyle: Object,
    option: String,
    valueLabel: String,
    hiddenFields: {
      type: Array,
      default: () => [],
    },
    componentStyle: {
      type: String,
      default: 'light',
    },

    // 字段详细配置
    cssStyleConf: {
      type: Object,
      default: () => ({
        xxx: { // 结构示例
          label: 'xxx',
        },
      }),
    },
  },
  data() {
    return {
      icon,
      C: rulesConst,
      xvueTheme: window._adoPremise.uc.theme, // 'dark'
      fontFamilyOptions: Options.fontFamilyOptions,
      flexDirections: Options.flexDirections,
    };
  },
  computed: {
    propKey() {
      return this.option.split('.').pop(); // cssStyle.icon => icon
    },
    attrsArr() {
      return Object.keys(this.dfAttrs);
    },
    fontSizeLabel() {
      if (this.propKey === 'icon') {
        return this.$demoi18n('panel.label.imgSize');
      }
      return this.$demoi18n('word.fontSize');
    },
    colorLabel() {
      if (this.propKey === 'icon') {
        return this.$demoi18n('panel.label.iconColor');
      }
      return this.$demoi18n('word.fontColor');
    },
  },
  watch: {
    dfAttrs: {
      handler(newVal, oldVal) {
        this.initAttrs();
      },
      deep: true,
    },
    componentStyle: {
      handler(newVal, oldVal) {
        Object.entries(this.cssStyle).map(([i]) => {
          const df = this.dfAttrs[i];
          if (df && isObject(df) && df[newVal]) {
            this.cssStyle[i] = df[newVal];
          }
        });
      },
    },
  },
  created() {
    this.initAttrs();
  },
  methods: {
    genRulesByKey,
    generateRules,
    initAttrs() {
      this.attrsArr.forEach(n => {
        if (!objHas(this.cssStyle, n)) {
          let df = this.dfAttrs[n];
          if (df && isObject(df) && df[this.componentStyle]) {
            df = df[this.componentStyle];
          }

          if (df && isObject(df)) {
            // 颜色对象 backgroundColor: { light: '#fff', dark: '#0D263A' }
            if (df[this.componentStyle]) {
              df = df[this.componentStyle];
            }

            // 宽度对象 _width: { switch: false, value: 100 }
            if (n.indexOf('_') === 0) {
              df = JSON.parse(JSON.stringify(df));
            }
          }

          this.cssStyle[n] = df;
        }
      });
      for (const i in this.cssStyle) {
        if (!this.attrsArr.includes(i)) {
          delete this.cssStyle[i];
        } else {
          // fontSize = '12px' 转换成12
          const n = this.cssStyle[i];
          if (!isObject(n) && /^\d+px$/.test(n)) {
            this.cssStyle[i] = Number(n.replace('px', ''));
          }
        }
      }
    },
    hasAttr(attr, key) {
      return attr === key && !this.hiddenFields.includes(attr);
    },
    isMargin(attr) {
      const arr = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
      return arr.includes(attr) && !this.hiddenFields.includes(attr);
    },
    isPadding(attr) {
      const arr = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'];
      return arr.includes(attr) && !this.hiddenFields.includes(attr);
    },
    saveBgImage(iconConf, cssStyle) {
      cssStyle.backgroundImage = iconConf;
    },
    deleteBgImage(iconConf, cssStyle) {
      cssStyle.backgroundImage = {};
    },
    getLabel(styleKey) {
      const label = this.cssStyleConf?.[styleKey]?.label;
      return label;
    },
    isObject,
  },
};
</script>
<style lang="less" scoped>
.css-style-editor {
  .item {
    .inner {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .label {
        text-align: right;
        width: 73px;
        margin-right: 12px;
        flex-shrink: 0;
      }
      .icon-radio-group {
        :deep(.el-radio) {
          padding: 0;
          border-radius: 0;
          height: auto;
          margin-right: 10px;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            padding-left: 0;
            display: flex;
            img {
              height: 18px;
              width: 22px;
            }
          }
          &.is-checked{
            border: 1px solid #409EFF;
          }
        }
      }
      :deep(.el-form-item) {
        margin-bottom: 0;
        width: 100%;
        .el-form-item__label {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .el-form-item__content {
          display: flex;
          align-items: center;
          height: 40px;
        }
      }
      .input-number-unit {
        padding: 0 6px;
      }
    }
  }
}
</style>
